import { CreateUINode, UINode } from "babylon-lib/gui/base/ui-node";
import { ANCHOR } from "babylon-lib/gui/control/abstract-base";
import { CreateUIRectangle } from "babylon-lib/gui/control/ui-rectangle";
import { CreateUIText, UIText } from "babylon-lib/gui/control/ui-text";
import { Stage, Vector3 } from "babylon-lib/index";
import { RenderOrder } from "babylon-lib/misc/render-order";
import * as Data from '../data/data';
import { SoundManager } from "../stages/default-stage-components/sound-manager";


class WarnPanel {

    private static countText: UIText;

    public static node: UINode;

    public static initialize(stage: Stage): void {
        this.initializeNode(stage);
        this.bindData(stage);
    }

    private static bindData(stage: Stage): void {
        const _this = WarnPanel;
        Data.failedCount.onChange((o, n) => {
            _this.countText.text = n + '';
            _this.node.display = n > 0 && n < 10;
            if(_this.node.display){
                SoundManager.countdown.play();
            }
        });
    }

    private static initializeNode(stage: Stage): void {
        const node = CreateUINode('warn-panel-node', stage.mainScene,
            {
                display: false,
                lockToCamera: true,
                anchor: new Vector3(0.5, 0.5, 0),
            },
            [
                CreateUIRectangle('warn-panel-background', stage.mainScene, {
                    anchor: ANCHOR.CENTER,
                    width: 8,
                    height: 1.6,
                    cornerRadius: 5,
                    background: '#421300',
                    alpha: 0.6,
                    renderingGroupId: RenderOrder.id(Data.orders.uiBack),
                    inoperable:true,
                }),
                CreateUIText('warn-panel-title', stage.mainScene, {
                    anchor: ANCHOR.CENTER,
                    text: '警告：请立即返回战区！',
                    fontColor: '#ffd900',
                    width: 6,
                    height: 1.6,
                    left: -0.05,
                    renderingGroupId: RenderOrder.id(Data.orders.ui),
                    inoperable:true
                }),
                this.countText = CreateUIText('warn-panel-text', stage.mainScene, {
                    anchor: ANCHOR.CENTER,
                    text: Data.failedCount.value + '',
                    fontSize: 60,
                    fontWeight: 'bold',
                    fontColor: '#ff3c00',
                    width: 2,
                    height: 1.6,
                    left: 0.25,
                    renderingGroupId: RenderOrder.id(Data.orders.ui),
                    inoperable:true,
                })
            ]
        );
        this.node = node;
    }

}


export { WarnPanel };